{% extends "base.html" %}

{% load i18n icons permissions translations %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs path_object %}
  <li class="breadcrumb-item">
    <a href="{% url 'guide' path=object.get_url_path %}">{% translate "Community localization checklist" %}</a>
  </li>

  <a class="float-end" href="{{ object.get_widgets_url }}">
    <img src="{% url 'widget-image' path=object.get_url_path widget='svg' color='badge' extension='svg' %}?native=1" />
  </a>
{% endblock breadcrumbs %}

{% block content %}

  {% announcements component=object %}

  {% include "snippets/component/state.html" %}

  {% perm 'component.edit' object as user_can_edit_component %}

  <div class="card">
    <div class="card-header">{% translate "Community localization checklist" %}</div>
    <div class="card-body">
      {% translate "Here you can find guidance to make your localization project attractive to the community." %}
    </div>

    <table class="table table-striped">
      {% for guide in guidelines %}
        {% if guide.is_relevant %}
          {% if guide.group %}
            <tr>
              <th colspan="3">
                {{ guide.description }}
                {% documentation_icon guide %}
              </th>
            </tr>
          {% else %}
            <tr>
              <td>
                {% if guide.passed %}
                  <span class="green">{% icon "check.svg" %}</span>
                {% elif guide.hint %}
                  {% icon "wrench.svg" %}
                {% else %}
                  <span class="red">{% icon "alert.svg" %}</span>
                {% endif %}
              </td>
              <td>
                {{ guide.description }}
                {% documentation_icon guide %}
              </td>
              <td class="buttons-cell">
                {% if user_can_edit_component %}
                  <a class="btn btn-primary" href="{{ guide.get_url }}">{% translate "Configure" %}</a>
                {% endif %}
              </td>
            </tr>
          {% endif %}
        {% endif %}
      {% endfor %}
    </table>
    <div class="card-footer">
      <a href="{{ object.get_absolute_url }}" class="btn btn-primary">{% translate "Return to the component" %}</a>
    </div>
  </div>

{% endblock content %}
